<template>
  <el-card
    class="re-soft"
    shadow="hover"
    :body-style="{ padding: '0px', height: 'auto' }"
  >
    <div class="re-top">
      <span class="rmyxtj" v-if="route.name.includes('game')">
        <img src="@/assets/orange2.png" />
        <span @click="gotoRouter('',router,{param: '389_409_422_1'},'game-alone-ist')">全部</span>
      </span>
      <img v-else src="@/assets/orange.png" />
    </div>

    <div class="re-list">
      <div
        class="re-list-it"
        v-for="(it, i) in data.slice(0, 3)"
        :key="i"
        @click="gotoDetail(it, router, axios)"
      >
        <div class="re-left">
          <img :src="it.icon" />
        </div>

        <div class="re-center">
          <span class="name">{{ it.name }}</span>
          <div class="flex">
            <span class="socre">
              <el-rate
                v-model="it.recommendIndex"
                disabled
                text-color="#ff9900"
              ></el-rate>
            </span>
          </div>
        </div>

        <div class="re-right">
          <button
            class="button is-theme-button"
            style="height: 24px"
            @click.stop="downloadUrl(it.highSpeedUrlOne,it.id)"
          >
            下载
          </button>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";
import { gotoDetail } from "@/utils/action.js";
import { useRoute, useRouter } from "vue-router";
const router = ref(useRouter());
const route = ref(useRoute());

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});
console.log(props.data)
// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.re-soft {
  min-height: 322px;
  .re-top {
    img {
      height: 80px;
      width: 100%;
      object-fit: cover;
    }
  }

  .re-list {
    display: flex;
    flex-direction: column;
    padding: 10px;

    &-it {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px;
      &:hover {
        background-color: #eee;
        border-radius: 6px;
        .re-left {
        img {
          width: 50px;
          height: 50px;
          transition: 0.1s all;
        }
      }
      }
      cursor: pointer;
      .re-left {
        img {
          width: 44px;
          height: 44px;
        }
      }

      .re-center {
        margin-left: 10px;
        flex: 1;

        .flex {
          display: flex;
          align-items: center;
          /deep/.el-rate__icon {
            margin-right: 0px !important;
            size: 10px;
          }
        }

        .name {
          font-size: 14px;
          font-weight: 400;
          color: #1d2127;
          line-height: 14px;
        }
        .socre {
          font-size: 12px;
          font-family: GoogleSans-Regular, GoogleSans;
          font-weight: 400;
          color: #f54446;
          line-height: 12px;
        }
        .size {
          height: 20px;
          margin-right: 5px;
          margin-top: 3px;
          font-size: 12px;
          font-weight: 400;
          color: #93999e;
          line-height: 20px;
        }
      }
    }
  }
}
.rmyxtj {
  position: relative;
  color: #fff;
  span {
    top: -24px;
    right: 20px;
    position: absolute;
    cursor: pointer;
  }
}
</style>
